<template>
  <div id="app">
	  <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
	  <com-list-layout :loading="isLoadingMx">
		  <com-filter-box
		  				ref="filterBoxRef"
		  				slot="filter"
		  				:setting="setting"
		  				@change="onFilterChangeMx"
		  				@reset="onResetMx"
		  				@filter-select="onFilterSelect"
		  			></com-filter-box>
					<common-table
									slot="table"
									ref="commonTableRef"
									:data="dataList"
									:columns="columns"
									:table-params="{
										size: 'small',
										border: true,
									}"
									:showSelection="false"
									:onSelectTable="false"
									:page="getPageParams()"
								></common-table>
					<com-pageable
									slot="footer"
									:page-num="queryParamsMx.current"
									:page-size="queryParamsMx.size"
									:total-count="totalCountMx"
									@page-change="onPageChangeMx"
									@size-change="onSizeChangeMx"
									
								></com-pageable>
	  </com-list-layout>
  </div>
</template>

<script>
import PigButton from './package/pig-button.vue'
import ComListLayout from './package/ComListLayout/index.vue'
import ComFilterBox from './package/ComFilterBox/index.vue'
import CommonTable from './package/CommonTable/index.vue'
import ComPageable from './package/ComPageable/index.vue'
import ListMixin from './package/ListMixin/index.js'
import {setting} from './config/index.js'
import {columns} from './config/column.js'
export default {
  name: 'app',
  data(){
	  return{
		isLoadingMx:false,
		setting,
		columns,
		dataList:[]
	  }
  },
  components: {
    PigButton,
	ComListLayout,
	ComFilterBox,
	CommonTable,
	ComPageable
  },
  mixins: [ListMixin],
  mounted(){
	  	this.initList();
  },
  methods:{
	  initList() {
	  			this.setQueryHandler(this.queryListData);
	  		},
	  queryListData() {
		  let pp= {
			  	...this.getPageParams(),
				...this.getFilterParams()
		  }
		  console.log('pp',pp)
	  	   // this.isLoadingMx = true;
	  			
	  		},
  }
}
</script>

<style lang='less' scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  /* overflow: hidden; */
  /* margin-top: 60px; */
}
 ::v-deep {
		.title-box {
			display: none;
		}
}
</style>
<style>
	 body,html{
		 margin: 0;
		 padding: 0;
		 height: 100%;
	 }
</style>
